<route lang="json5">
{
  name: 'Dashboard',
  meta: {
    title: '首页',
    layout: 'pc-default',
    superior: 'none',
  },
}
</route>
<template>
  <div class="dashboard bg-amber-500 text-amber-500 font-bold">
    <!-- Container -->
    <div class="container-box">
      <h2 class="title">路由配置示例</h2>
      <div class="card-container">
        <el-card
          v-for="(item, index) in routeExamples"
          :key="index"
          shadow="hover"
          class="route-card"
        >
          <div class="card-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <div class="tags">
              <el-tag type="info" effect="plain">{{ item.type }}</el-tag>
              <el-tag :type="item.hasChildren ? 'success' : 'warning'" effect="plain">
                {{ item.hasChildren ? '包含子路由' : '无子路由' }}
              </el-tag>
            </div>
            <el-button type="primary" @click="router.push(item.path)" :icon="ArrowRight">
              查看示例
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ArrowRight } from '@element-plus/icons-vue';

  const router = useRouter();

  const routeExamples = ref([
    {
      title: 'Route标签示例',
      description: '使用<route>标签定义路由，支持复杂配置和子路由',
      path: '/dashboard-route-tag',
      type: 'JSON5 <route>标签',
      hasChildren: true,
    },
    {
      title: 'TSX路由示例',
      description: '在TSX文件中使用route属性定义路由配置',
      path: '/dashboard-tsx',
      type: 'TSX route属性',
      hasChildren: true,
    },
    {
      title: 'defineOptions示例',
      description: '在<script setup>中使用defineOptions定义路由',
      path: '/dashboard-options',
      type: 'defineOptions API',
      hasChildren: true,
    },
  ]);
</script>

<style scoped lang="scss">
  :deep(.el-menu .el-input .el-input__wrapper) {
    width: 272px;
    height: 40px;
    border: 1px solid #165dff;
    border-radius: 80px;
  }

  .dashboard {
    padding: 20px;

    .title {
      margin-bottom: 20px;
      color: #303133;
      font-size: 24px;
    }

    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;

      .route-card {
        height: 100%;

        .card-content {
          display: flex;
          flex-direction: column;
          height: 100%;

          h3 {
            margin-top: 0;
            margin-bottom: 10px;
          }

          p {
            flex-grow: 1;
            margin-bottom: 15px;
          }

          .tags {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
          }
        }
      }
    }
  }
</style>
